<template>
	<section class="content">
		<!-- <navbar :title="$t('h_title.erduzhuanhuan')" :right_show="true" :type="1" ref="navbar"></navbar> -->
		<div class="topsss">
			<section class="top-df">
				<div>
					<img src="../assets/images/xunihuobi.png" alt="">
					{{$t('h_title.erduzhuanhuanTow')}}
				</div>
				<div @click="onClickRight">
					<img src="../assets/images/zaixiankefu.png" alt="">
					{{$t('h_title.xianshangkefu')}}
				</div>
			</section>
			<section class="top-1">
				<div @click="fun_chonghui">
					<img src="../assets/images/zhanghuyue.png" alt="">
					{{$t('erduzhuanhuan.chonghuijinge')}}
					<!-- <span ></span> -->
				</div>
				<div @click="fun_zijinhuishou">
					{{$t('erduzhuanhuan.zijinhuishou')}}
				</div>
			</section>
		</div>
		<section class="top-2">
			<article>
				<h6><img src="../assets/images/qianbao.png" alt="">{{$t('erduzhuanhuan.zhongxinqianbao')}}</h6>
				<h5>{{user_money}}</h5>
			</article>
			<article>
				<h6><img src="../assets/images/qianbao.png" alt="">{{$t('erduzhuanhuan.youxiqianbao')}}</h6>
				<h5>{{api_money}}</h5>
			</article>
		</section>
		<section class="top-3">
			<article v-for="item in nav_list" v-show="item.id != 0">
				<p>{{item.api_title}}</p>
				<h5 :class="item.is_on == 1?'h5-on':''">{{item.money}}</h5>
			</article>
		</section>
		<section class="top-4">
			<article @click="fun_left">{{type_l_name}}</article>
			<article @click="fun_right">{{type_r_name}}</article>
		</section>
		<section class="top-5">
			<span>$</span>
			<input type="number" v-model="amount" :placeholder="$t('erduzhuanhuan.zhuanzhang_placeholder')">
		</section>
		<button :class="['btn',amount > 0?'btn-on':'']"
			@click="fun_sumbmit">{{$t('erduzhuanhuan.lijizhuanzhang')}}</button>

		<article style="height: 2rem;"></article>

		<van-popup v-model="show_L" round position="bottom">
			<van-picker show-toolbar :columns="nav_list" @cancel="show_L = false" @confirm="onConfirm_L"
				value-key="api_title" />
		</van-popup>
		<van-popup v-model="show_R" round position="bottom">
			<van-picker show-toolbar :columns="nav_list" @cancel="show_R = false" @confirm="onConfirm_R"
				value-key="api_title" :default-index="1" />
		</van-popup>

		<bottom></bottom>
		<kefu :show="kefu_show" :s_show="s_show" @fun_kefu_x="fun_kefu_x"></kefu>
	</section>
</template>

<script>
	import kefu from '@/components/kefu';
	import Bottom from "@/components/bottom"
	import navbar from "@/components/navbar"
	import {
		Picker,
		Popup
	} from 'vant';
	export default {
		name: "erduzhuanhuan",
		components: {
			Bottom,
			navbar,
			kefu,
			[Picker.name]: Picker,
			[Popup.name]: Popup
		},
		data() {
			return {
				nav_list: [],
				columns_L: [],
				kefu_show: false,
				s_show: false,
				show_L: false,
				show_R: false,
				type_l_id: 0, //左侧游戏的id
				type_l_name: this.$t('erduzhuanhuan.zhongxinqianbao'), //左侧游戏的名称
				type_r_id: 0, //右侧游戏的id
				type_r_name: this.$t('erduzhuanhuan.zhongxinqianbao'), //右侧游戏的名称
				amount: '',
				transfer_type: 0,
				account2: 350,
				api_money: 0.00,
				user_money: 0.00
			}
		},
		mounted() {
			this.nav_onLoad()

		},
		methods: {
			onClickRight() {
				this.$router.push('/serviceCenter')
				// this.s_show = true
				// this.kefu_show = true
			},
			fun_kefu_x() {
				this.s_show = false
				this.kefu_show = false
			},
			nav_onLoad() {
				this.$https.fetchGet('/m/personal', {}).then(res => {
					let data = res.data.api_mod,
						arr = []
					arr.push({
						'id': 0,
						'api_title': this.$t('erduzhuanhuan.zhongxinqianbao'),
						'money': '0.00'
					})
					// this.api_money = res.data.api_money
					this.user_money = res.data.member.money
					for (let item in data) {
						arr.push(data[item])
					}
					this.nav_list = arr
					this.type_r_id = arr[1].type_r_id
					this.type_r_name = arr[1].api_title
					this.fun_chonghui()
				})
			},
			onConfirm_L(item) {
				this.type_l_id = item.id
				this.type_l_name = item.api_title
				this.show_L = false
				if (item.id != 0) {
					this.transfer_type = 1
					this.account2 = item.id
					this.type_r_id = 0
					this.type_r_name = this.$t('erduzhuanhuan.zhongxinqianbao')
				} else {
					this.type_r_id = this.nav_list[1].type_r_id
					this.type_r_name = this.nav_list[1].api_title
				}
			},
			onConfirm_R(item) {
				this.type_r_id = item.id
				this.type_r_name = item.api_title
				this.show_R = false
				if (item.id != 0) {
					this.account2 = item.id
					this.transfer_type = 0
					this.type_l_id = 0
					this.type_l_name = this.$t('erduzhuanhuan.zhongxinqianbao')
				} else {
					this.type_l_id = this.nav_list[1].type_r_id
					this.type_l_name = this.nav_list[1].api_title
				}
			},
			fun_left() {
				this.show_L = true
			},
			fun_right() {
				this.show_R = true
			},
			fun_sumbmit() { //提交转换
				if (this.amount < 0 || this.amount == '') {
					this.$toast(this.$t('erduzhuanhuan.zhuanzhang_placeholder'))
				} else {
					if (this.type_l_id == this.type_r_id) {
						this.$toast(this.$t('erduzhuanhuan.alt1'))
					} else {
						this.$https.fetchPost('/member/transfer', {
							'money': this.amount,
							'transfer_type': this.transfer_type,
							'account1': '1',
							'account2': this.account2
						}).then(res => {
							this.nav_onLoad();
							this.$toast(res.status.msg)
						})
					}
					///处理
					// this.$https.fetchPost('',item).then(res => {
					//
					// }).catch(err => {
					//     this.$toast('网络异常');
					// })

				}
			},
			async fun_chonghui() { ///重绘金额


				///处理
				let data = this.nav_list.filter(item => {
						return item.is_on == 1
					}),
					_that = this
				_that.api_money = 0;
				var i = 0;
				for (let item of data) {
					for (let item2 in this.nav_list) {
						if (item2 != 0 && this.nav_list[item2]['api_title'] == item.api_title) {
							_that.nav_list[item2]['money'] = '...'
						}
					}
					this.$https.fetchGet_chonghui('/api/check', {
						'api_name': item.api_name
					}, false).then(res => {

						for (let item2 in this.nav_list) {
							if (item2 != 0 && this.nav_list[item2]['api_title'] == item.api_title) {
								_that.api_money = (Number(_that.api_money) + Number(res.Data)).toFixed(1);
								// 
								_that.nav_list[item2]['money'] = res.Data
							}
						}

					})
					i++;
				}

			},
			fun_zijinhuishou() { ///资金回收
				// this.nav_list = this.nav_list.map( subArray => {
				//     subArray['num'] = '回收中'
				//     return subArray
				// })
				// setTimeout(() => {
				//     this.nav_list = this.nav_list.map( subArray => {
				//         subArray['num'] = '0.00'
				//         return subArray
				//     })
				// },1000)
				///处理
				this.$https.fetchPost('/member/transfer_all', {}).then(res => {
					this.nav_onLoad()
				}).catch(err => {
					this.$toast('网络异常');
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		color: #c3c3c3;

		.topsss {
			width: 100%;
			height: 150px;
			background-image: url('../assets/images/xunihuobibg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.top-df {
				display: flex;
				align-items: center;
				position: relative;
				padding: 20px 0px 20px 0px;
				justify-content: flex-end;
				box-sizing: border-box;

				div:nth-child(1) {
					display: flex;
					align-items: center;
					font-size: 15px;
					color: #fff;
					width: 100%;
					justify-content: center;
					padding: 0px 20px 0px 0px;
					box-sizing: border-box;

					img {
						width: 40px;
						height: 40px;
						margin-right: 5px;
					}
				}

				div:nth-child(2) {
					display: flex;
					align-items: center;
					font-size: 12px;
					width: 75px;
					height: 22px;
					position: absolute;
					top: 30px;
					right: 20px;
					color: #333;
					border-radius: 2px;
					background-image: linear-gradient(#f6ce38, #dda82d);
					justify-content: center;

					img {
						width: 20px;
						height: 20px;
					}
				}
			}

			.top-1 {
				padding: 20px 20px 0px 40px;
				display: flex;
				justify-content: space-between;

				div:nth-child(1) {
					display: flex;
					align-items: center;
					font-size: 18px;
					color: #fddd1e;

					img {
						width: 25px;
						height: 24px;
						margin-right: 5px;
					}
				}

				div:nth-child(2) {
					padding: 4px 12px !important;
					color: #fff;
					font-size: 13px;
					background: linear-gradient(#770c17, #441418);
					border-radius: 3px;
				}

				// 	article {
				// 		display: flex;

				// 		&:last-child {
				// 			color: #d2b79c;
				// 		}

				// 		span {
				// 			margin-left: .4rem;
				// 			display: block;
				// 			width: .5rem;
				// 			height: .5rem;
				// 			background: url("~path_img/sp1_01.png") center no-repeat;
				// 			background-size: .5rem .5rem;
				// 		}
				// 	}
			}
		}


		.top-2 {
			display: flex;
			font-size: .32rem;
			padding: .5rem 0;

			article {
				width: 50%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				position: relative;

				h6 {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10px;
					font-size: 17px;
					font-weight: 400;
					color: #f7de16;

					img {
						width: 25px;
						height: 22px;
						margin-right: .2rem;
					}
				}

				h5 {
					width: 100px;
					height: 35px;
					line-height: 35px;
					color: #fff;
					padding-left: 30px;
					font-weight: 400;
					font-size: 15px;
					margin: 0px 0px 5px;
					border-radius: 0px 5px 5px 0px;
					background-image: url('../assets/images/yue.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				&:last-child:after {
					position: absolute;
					top: .1rem;
					left: 0px;
					content: ' ';
					display: block;
					width: 1px;
					height: 70px;
					background-color: #383737;
				}
			}
		}

		.top-3 {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: .5rem;

			article {
				text-align: center;
				width: 25%;
				font-size: .34rem;
				// border-bottom: #383737 1px solid;
				padding: .4rem 0;
				position: relative;

				p {
					width: 70px;
					height: 20px;
					line-height: 20px;
					margin: 0px auto .2rem;
					box-sizing: border-box;
					background-image: linear-gradient(#f6ce38, #dda82d);
					border-radius: 2px;
					color: #383737;
					font-size: 10px;
					font-weight: 600;
				}

				.h5-on {
					color: #fff;
				}

				&:after {
					position: absolute;
					top: .5rem;
					content: ' ';
					display: block;
					width: 1px;
					height: 1rem;
					background-color: #383737;
				}
			}
		}

		.top-4 {
			display: flex;
			background: hsla(0, 4%, 19%, 0.5) url("~path_img/sp1_03.png") center no-repeat;
			background-size: .6rem;
			padding: .45rem 0;
			margin-bottom: .6rem;

			article {
				width: 50%;
				text-align: center;
				font-size: .4rem;
				font-weight: bold;
			}
		}

		.top-5 {
			display: flex;
			font-size: .5rem;
			padding: .3rem .3rem;
			align-items: center;
			margin-bottom: .2rem;

			span {}

			input {
				line-height: 1rem;
				background: transparent;
				border: none;
				padding-left: .3rem;
			}
		}

		.btn {
			background-image: linear-gradient(90deg, #f6ce38, #dda82d);
			color: #fff;
			font-size: .44rem;
			width: 94%;
			margin: 0 auto;
			border: none;
			border-radius: .2rem;
			line-height: 1.3rem;
			opacity: .5;
		}

		.btn-on {
			opacity: 1;
		}
	}
</style>